<div [@routerTransition]>
  <nz-card [nzTitle]="nzTitle" nzHoverable="true">
    <ng-template #nzTitle>
      <div class="text-center magicodes__block">
        <i class="anticon anticon-lock"></i>
        <span>{{l('ChangePassword')}}</span>
      </div>
    </ng-template>
    <form nz-form #resetPassForm="ngForm" (ngSubmit)="save()"  autocomplete="off">

      <nz-alert class="mb-md" nzType="info" nzCloseable [nzMessage]="l('PleaseEnterYourNewPassword')" nzShowIcon>
      </nz-alert>

      <nz-form-item>
        <nz-form-control nzHasFeedback>
          <nz-input-group nzPrefixIcon="anticon anticon-lock">
            <input nz-input name="password" #password="ngModel" [(ngModel)]="model.password" [placeholder]="l('Password')"
              autoFocus type="password" validateEqual="passwordRepeat" reverse="true" minlength="6" maxlength="32"
              required>
          </nz-input-group>
          <nz-form-explain *ngIf="password.control.dirty&&password.control.errors">
            <ng-container *ngIf="password.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
            <ng-container *ngIf="password.control.hasError('maxlength')">{{l('MaxLength')}}</ng-container>
            <ng-container *ngIf="password.control.hasError('minlength')">{{l('MinLength')}}</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-control nzHasFeedback>
          <nz-input-group nzPrefixIcon="anticon anticon-lock">
            <input nz-input name="passwordRepeat" #passwordRepeat="ngModel" [(ngModel)]="model.passwordRepeat"
              [placeholder]="l('PasswordRepeat')" required type="password" validateEqual="password" reverse="false"
              minlength="6" maxlength="32">
          </nz-input-group>
          <nz-form-explain *ngIf="passwordRepeat.control.dirty&&passwordRepeat.control.errors">
            <ng-container *ngIf="passwordRepeat.control.hasError('validateEqual')">{{l('PasswordsDontMatch')}}</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-control nz-col class="text-center">
          <button nz-button routerLink="/account/login" [nzType]="'default'" [disabled]="saving" type="button">
            <i class="anticon anticon-rollback"></i>
            <span>{{l("Back")}}</span>
          </button>
          <button nz-button [nzType]="'primary'" [nzLoading]="saving" [disabled]="!resetPassForm.form.valid" type="submit">
            <i class="anticon anticon-check"></i>
            <span>{{l("LogIn")}}</span>
          </button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-card>
</div>
